<template>
  <div style="border: 1px solid #eee;margin: 0 20px;">
    <div>
      <el-table :data="userListData" row-key="id" v-loading="listLoading" fit highlight-current-row
                :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" class="c-width100 color-222 family-PingFangSC-Regular font-s12">
        <el-table-column align="center" label="昵称">
          <template slot-scope="scope">
            <div class="clearfix">
              <div class="fl img margin-r10"><img :src="scope.row.headimgurl || defultImg" @error="setDefultImg" alt=""></div>
              <div class="text-alignL">
                <div class="font-s14 line-limit-length-240" :title="scope.row.nickname">{{scope.row.nickname}}</div>
                <div class="color-999">(ID:{{scope.row.userId}})</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="220" align="center" label="票型">
          <template slot-scope="scope">
            <div class="text-alignL">
              <span>{{scope.row.permission}}</span><span class="color-409">|</span>
              <span>{{scope.row.price}}</span>
            </div>
            <div class="color-999 text-alignL">
              报名时间：{{scope.row.enrollTime}}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="240" align="center" label="资料">
          <template slot-scope="scope">
            <div class="text-alignL">
              <span>{{scope.row.name}}</span>
              <div>{{scope.row.mobile}}</div>
            </div>
            <div class="text-alignL">
            <el-popover
              placement="left"
              width="400"
              trigger="hover">
              <h3 class="padding-l10">{{scope.row.fieldVal.length>0?'其他信息':'暂无信息'}}</h3>
              <div class="margin-b30 margin-l70" v-for="(item,index) in scope.row.fieldVal">
                <span class="ib width60 right">{{item.name}}:</span><span class="margin-l">{{item.value}}</span>
              </div>
              <b slot="reference">更多资料</b>
            </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" align="center" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.is_success}}</span>
          </template>
        </el-table-column>

        <!--<el-table-column width="150" align="center" label="其他属性">-->
          <!--<template slot-scope="scope">-->
            <!--<el-popover-->
              <!--placement="right"-->
              <!--width="400"-->
              <!--trigger="hover">-->
              <!--<h3 class="padding-l10">{{scope.row.fieldVal?'其他信息':'暂无信息'}}</h3>-->
              <!--<div class="margin-b30 margin-l70" v-for="(item,index) in scope.row.fieldVal">-->
              <!--<span class="ib width60 right">{{item.name}}:</span><span class="margin-l">{{item.value}}</span>-->
              <!--</div>-->
              <!--<b slot="reference">更多资料</b>-->
            <!--</el-popover>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column align="center" width="100" label="操作">
          <template slot-scope="scope">
            <div v-if="permission==3&&scope.row.isAudit=='1'&&scope.row.is_success!='作废' ">
              <b @click="notThrough(scope.row.id)">作废</b><span class="color-409">|</span>
              <b @click="pass(scope.row.id)">通过</b>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParam.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryParam.reTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import { addOrEditActivitiesEnroll } from '@/api/activities'
  import defultImg from '@/assets/default_head.png'
  export default {
    props: ['queryParam', 'userListData', 'permission'],
    data() {
      return {
        defultImg,
        inputParam: {
          id: -1,
          activityId: -1,
          userId: -1,
          actTicketId: -1,
          orderId: -1,
          name: '',
          opType: 3,
          mobile: '',
          fieldVal1: '',
          fieldVal2: '',
          fieldVal3: '',
          fieldVal4: '',
          fieldVal5: '',
          enrollTime: '',
          signUpTime: '',
          issuccess: -1
        },
        listLoading: false, // 加载时转圈
        tableData: []
      }
    },
    methods: {
      setDefultImg(e) {
        e.target.src = defultImg
      },
      handleSizeChange(val) {
        this.queryParam.pageSize = val
        this.$emit('refreshData')
      },
      handleCurrentChange(val) {
        this.queryParam.currentPage = val
        this.queryParam.pageIndex = (val - 1) * this.queryParam.pageSize
        this.$emit('refreshData')
      },
      linkToSign() {
        location.href = '#/activities/signManage'
      },
      notThrough(id) {
        this.inputParam.id = id
        this.inputParam.opType = 5
        this.inputParam.activityId = this.$route.params.activityId
        this.listLoading = true
        addOrEditActivitiesEnroll(this.inputParam).then(res => {
        	this.listLoading = false
          if (res.data.data.retError == 0) {
            this.$message({
              type: 'success',
              message: '审核成功!'
            })
          } else {
            this.$message({
              type: 'warn',
              message: '取消签到失败!'
            })
          }
          this.$emit('refreshData')
        }).catch(err => {
          this.listLoading = false
          console.log(err)
        })
      },
      pass(id) {
        this.inputParam.id = id
        this.inputParam.opType = 2
        this.inputParam.activityId = this.$route.params.activityId
        this.listLoading = true
        addOrEditActivitiesEnroll(this.inputParam).then(res => {
          this.listLoading = false
          if (res.data.data.retError == 0) {
            this.$message({
              type: 'success',
              message: '审核成功!'
            })
          } else if (res.data.data.retError == 1) {
            this.$message({
              type: 'warn',
              message: '免费票已用完'
            })
          } else {
            this.$message({
              type: 'warn',
              message: '审核失败!'
            })
          }
          this.$emit('refreshData')
        }).catch(err => {
        	this.listLoading = false
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped>
  a:hover {
    color: #409EFF;
  }

  b {
    cursor: pointer;
    font-weight: 500;
  }

  b:hover {
    color: #409eff;
  }
  /*.others {*/
    /*visibility: hidden;*/
  /*}*/
  /*.others:hover {*/
    /*visibility: visible;*/
  /*}*/
</style>
